<template>
  <div class="page page-goods" v-if="showGoods">
    <van-swipe class="goods-swipe" :autoplay="3000">
      <van-swipe-item v-for="thumb in goods.thumb" :key="thumb">
        <img :src="'/static/'+thumb" alt="" />
      </van-swipe-item>
    </van-swipe>

    <van-cell-group>
      <van-cell>
        <div class="goods-title">{{ goods.name }} <span v-text="label"></span></div>
        <div class="goods-price">
          <span v-text="formatPrice(goods.price, goods.sale)" v-if="goods.sale" class="price-sale"></span>
          <span v-text="'￥'+goods.price" :class="{'line-through': goods.sale}" class="price-normal"></span>
        </div>
      </van-cell>
    </van-cell-group>

    <van-collapse v-model="activeName" accordion>
      <van-collapse-item title="商品介绍" name="1">
        提供多样店铺模板，快速搭建网上商城
      </van-collapse-item>
      <van-collapse-item title="商品评价" name="2">
        网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失
      </van-collapse-item>
    </van-collapse>

    <div v-if="checkIndex > -1" class="detail-function">
      <p>该产品已加入推荐</p>
      <van-button type="primary" @click="removeFromRecommend()">移出推荐</van-button>
    </div>
    <div v-else class="detail-function">
      <van-button type="default" @click="addToRecommend(goods.id)">加入推荐</van-button>
    </div>

  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import resetMenuList from '@/utils/global'

export default {
  data () {
    return {
      goods: {},
      menuLists: [],
      menuArray: [],
      activeName: '1',
      label: null,
      checkIndex: -1,
      showGoods: true,
      recommend: this.$route.params.recommend
    }
  },
  computed: {
    ...mapGetters(['getRecommendMenu'])
  },
  mounted () {
    let currentGoodsId = this.$route.params.menuId
    this.menuArray = resetMenuList()
    this.menuArray.forEach((item, index) => {
      if (item.id === currentGoodsId) {
        this.goods = this.menuArray[index]
        this.label = item.label
        console.log(this.goods)
      }
    })
    if (!this.goods.id || !this.goods.status) {
      this.showGoods = false
      console.log('该商品不存在或已下架。')
    }
    console.log(this.getRecommendMenu)
    this.checkGoodsIndex()
  },
  methods: {
    formatPrice (price, sale) {
      return '¥ ' + Number(price * sale / 10).toFixed(2)
    },
    addToRecommend: function (id) {
      this.$store.dispatch('changeRecommendMenu', id)
      this.checkGoodsIndex()
      console.log(this.$store.getters.getRecommendMenu)
    },
    checkGoodsIndex () {
      if (this.goods.id && this.getRecommendMenu.length > 0) {
        this.checkIndex = this.getRecommendMenu.indexOf(this.goods.id)
      } else {
        this.checkIndex = -1
      }
    },
    removeFromRecommend: function () {
      if (this.checkIndex > -1) {
        this.$store.dispatch('spliceRecommendMenu', this.checkIndex)
      }
      this.checkGoodsIndex()
      console.log(this.$store.getters.getRecommendMenu)
    }
  }
}
</script>

<style scoped lang="less">
  .goods {
    padding-bottom: 50px;
    &-swipe {
      img {
        width: 100%;
        display: block;
      }
    }
    &-title {
      font-size: 16px;
      span {
        font-size: 14px;
      }
    }
    &-price {
      span:first-child {
        font-size: 16px;
        color: orange;
      }
    }
    &-express {
      color: #999;
      font-size: 12px;
      padding: 5px 15px;
    }
    &-cell-group {
      margin: 15px 0;
      .van-cell__value {
        color: #999;
      }
    }
    &-tag {
      margin-left: 5px;
    }
  }
  .detail-function {
    text-align: center;
    font-size: 16px;
    padding: 20px 15px;
    button {
      width: 100%;
      display: block;
    }
    p + button {
      margin: 20px 0 0;
    }
  }
</style>
